<template>
  <basic-container>
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;margin-bottom: 20px">
      <el-container>
        <el-container>
          <el-container>
            <el-main style="background: #fff!important">
              <div style="background:#fff;height: 55px;line-height: 50px;padding-left:5px ">
                车间：<el-select v-model="workshopId" placeholder="请选择车间"  filterable clearable style="width:200px;margin-right: 5px">
                <el-option
                  @click.native="workshopChange(item)"
                  v-for="item in workshopList"
                  :key="item.id"
                  :label="item.workshopName"
                  :value="item.id">
                </el-option>
              </el-select>
                产线名称：<avue-input v-model="realityLineName" style="width:180px;margin-right: 5px" placeholder="请输入产线名称" ></avue-input>
                产线模板：<el-select v-model="lineTplId" placeholder="请选择产线模板"  filterable clearable style="width:200px;margin-right: 5px">
                <el-option
                  @click.native="productLineTplChange(item)"
                  v-for="item in productLineTemplateList"
                  :key="item.id"
                  :label="item.lineName"
                  :value="item.id">
                </el-option>
              </el-select>
                产线类型：<el-select v-model="lineType" placeholder="请选择产线类型"  filterable clearable style="width:200px;margin-right: 5px">
                <el-option
                  v-for="item in lineTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
                <el-button type="primary" @click="saveRealityLine">保存</el-button>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
    <template>
      <div class="form-designer"  v-loading="saveLoading">
        <el-container style="border: #e0e0e0 solid 1px;border-top:none">
          <el-main class="demo" >
            <avue-flow :height="800"
                       width="100%"
                       style="min-height: 800px;"
                       ref="flow"
                       :option="option"
                       v-model="flowForm">
              <template #header="{node}" >
                <el-tooltip class="item" effect="dark" :content="`工位(`+(node || {}).name+`)`" placement="top-start">
                     <span style="width:145px;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: bottom;text-overflow: ellipsis;">
                        工位({{(node || {}).name}})
                    </span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除工序" placement="top-start">
                  <i class="el-icon-delete"  style="cursor: pointer;float: right;line-height: 30px;margin-right: 2px" @click="deleteNode(node)"></i>
                </el-tooltip>
              </template>
              <template slot-scope="{node}">
                <el-collapse :ref="node.id+`Ref`"  v-model="showActive[node.id]" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                  <el-collapse-item title="工序信息" name="1">
                    <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                      <el-descriptions-item  label="工序" :labelStyle="{'width': '50px'}"
                                             v-model="`process_`+node.id"
                                             v-for="(item, index) in workPositionProcessItem[node.id]">
                        <span style="float: left;margin-top: 7px">{{item.processName}}</span>
                        <el-tooltip class="item" effect="dark" content="设备人员信息" placement="top-start">
                          <el-button type="text"  @click="devicePersonInfo(node,item,index)" style="float: right;font-size: 16px"><i class="el-icon-tickets"></i></el-button>
                        </el-tooltip>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                </el-collapse>
              </template>
            </avue-flow>

          </el-main>
        </el-container>
      </div>
    </template>

    <!--设备人员信息弹窗页面-->
    <el-dialog title=""
               :visible.sync="deviceDialogVisible"
               width="50%"
               height="600"
               lock-scroll
               v-dialogDrag
               append-to-body
               :close-on-click-modal="false"
               v-if="deviceDialogVisible"
               :fullscreen="deviceDialogFull">
      <el-backtop target=".el-card__body .el-dialog__wrapper .el-dialog" :right="15" :bottom="20" :visibility-height="1" />
      <el-backtop :bottom="60"></el-backtop>
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              设备人员信息
          </span>
          <div class="avue-crud__dialog__menu" style="cursor: pointer;margin-top: -2px;margin-right: 10px;" @click="deviceDialogFull? deviceDialogFull=false: deviceDialogFull=true">
            <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
      <!--工序菜单-->
      <div style="height:30vh;width: 90%;margin-left: auto;margin-right: auto">
        <div style="width: 20vh;float: left;margin-left: 20px">
          <el-steps :space="120" direction="vertical" status="process">
            <el-step :title="workPositionName">
              <template slot="icon">
                工位
              </template>
            </el-step>
            <el-step :title="processInfo.workshopSection">
              <template slot="icon">
                工段
              </template>
            </el-step>
            <el-step :title="processInfo.processName">
              <template slot="icon">
                工序
              </template>
            </el-step>
          </el-steps>
        </div>
        <div style="width: 50vh;height:30vh;display: inline-block;margin-top: 10px;margin-bottom: 10px;float: right">
          <el-descriptions class="margin-top" title="设备人员添加" style="" :labelStyle="{width: '50px',fontSize: '14px',color: '#606266'}" :contentStyle="{width: '150px'}" :column="1" size="medium" border >
            <template slot="title">
              <el-button type="primary" size="small" @click="addDevicePersonInfo">添加</el-button>
            </template>
            <el-descriptions-item label="设备">
              <el-select v-model="info.deviceSn" placeholder="请选择设备"  filterable clearable :filter-method="deviceFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in deviceList"
                  @click.native="chooseDevice(item)"
                  v-show=" !deviceSnVal || sourceDeviceList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="工具">
              <el-select v-model="info.toolSn" placeholder="请选择工具" @change="chooseTool" multiple  filterable clearable  :filter-method="toolFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in toolList"
                  v-show=" !toolSnVal || sourceToolList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="夹具">
              <el-select v-model="info.clampSn" placeholder="请选择夹具" @change="chooseClamp" multiple filterable clearable  :filter-method="clampFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in clampList"
                  v-show=" !clampSnVal || sourceClampList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="员工">
              <el-select v-model="info.personName" placeholder="请选择人员"  filterable clearable>
                <el-option
                  v-for="item in personCredentialList"
                  @click.native="choosePerson(item)"
                  :label="item.jobNo"
                  :value="item.jobNo">
                </el-option>
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="el-dialog-height">
        <el-table :data="infoList"  height="250" border style="width: 100%;float: left;display: inline-block">
          <el-table-column prop="deviceName" label="设备" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.deviceSn" placeholder="请选择设备"  v-if="scope.row.edit"  filterable clearable :filter-method="deviceFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in deviceList"
                  v-show=" !deviceSnVal || sourceDeviceList.includes(item.deviceSn)"
                  @click.native="chooseRowDevice(item, scope.row)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.deviceName }}{{ scope.row.deviceSn }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="toolName"   label="工具" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.toolSn" placeholder="请选择工具" @change="chooseRowTool(scope.row)" multiple   v-if="scope.row.edit"  filterable clearable :filter-method="toolFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in toolList"
                  v-show=" !toolSnVal || sourceToolList.includes(item.deviceSn)"

                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.toolName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clampName"  label="夹具" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.clampSn" placeholder="请选择夹具" @change="chooseRowClamp(scope.row)" multiple v-if="scope.row.edit"  filterable clearable :filter-method="clampFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in clampList"
                  v-show=" !clampSnVal || sourceClampList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.clampName }}</span>
            </template>

          </el-table-column>
          <el-table-column prop="personName" label="员工" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.personName" placeholder="请选择人员"  v-if="scope.row.edit"  filterable clearable>
                <el-option
                  v-for="item in personCredentialList"
                  :label="item.jobNo"
                  :value="item.jobNo">
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.personName }}</span>
            </template>

          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.edit">
                <el-button type="text" size="small" @click="saveRow(scope.$index, scope.row)">保存</el-button>
                <el-button type="text" size="small" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
              </div>
              <div v-else>
                <el-button type="text" size="small" @click="editRow(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text" @click="delDevicePersonInfo(scope.row, scope.$index)" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

  </basic-container>
</template>

<script>
import { getObj} from '@/api/pfoc/factorysettings' //获取当前工厂信息
import { getDevice} from '@/api/hengdong/pfocinterface'//获取设备相关
import { saveModelingLine } from '@/api/pfoc/realityproducelinemodeling' //产线建模保存
import { getLineTplInfoList} from '@/api/pfoc/realityproductlinetemplate' //获取所有产线模板以及详情
import { getWorkshopList} from '@/api/pfoc/workshop' //获取全部车间
import { getPersonCredentialList } from '@/api/workorder/personcredentialmanage'
import {updateSchedule} from "@/api/workorder/workscheduling"; //获取所有人员数据

export default {
  name: "add-line-modeling",
  data() {
    return {
      formCollapse: [],
      count: 0,
      flowForm:'',
      nodeCount:0,//节点下标
      form: [],//提交时数据集合
      option: {
        name: null,
        nodeList: [],//工位节点集合
        lineList: [],//工位各节点指向顺序集合
      },
      processInfo:{//工序信息
        workshopSection:null,//工段
        processName:null,//工序名称
        processId:null,//工序ID
      },
      info:{
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      },
      index:null,//用于标记打开的是第几个
      infoList:[],//存储设备人员信息
      workPositionProcessItem: {},//存储工位对应工序的二位数组
      showActive:[],//属性展示model集合
      zIndexStyle:"",
      realityLineName:null,//产线名称
      deviceList:[],//设备集合
      deviceSnVal:'',//设备搜索项
      sourceDeviceList:[],//源设备集合
      clampList:[],//夹具集合
      clampSnVal:'',//夹具搜索项
      sourceClampList:[],//源夹具集合
      toolSnVal:'',//工具搜索项
      toolList:[],//工具集合
      sourceToolList:[],//源工具集合
      organizationId:null,//组织ID
      organizationName:null,//组织名称
      saveLoading:false,//保存时遮罩开关
      lineTplId:null,//产线模板ID
      lineTplName:null,//产线模板名称
      mainData:{},//产线模板主数据
      subData:[],//产线模板详情数据
      productLineTemplateList:[],//产线模板数据集合
      personCredentialList:[],//人员资质数据集
      workshopList:[],//车间数据集合
      workshopId:null,//车间ID
      workshopName:null,//车间名称
      lineType:null,//产线类型（手动线、自动线）
      deviceDialogVisible:false,//设备添加弹窗开关
      deviceDialogFull:false,//设备添加弹窗放大缩小
      workPositionName:null,//工位名称(用于工序添加)
      workPositionId:null,//工位ID(用于工序添加)
      nodeId:null,//工位节点ID(用于工序添加)
      lineTypeList:[//产线类型列表
        {
          value: '手动线',
          label: '手动线'
        }, {
          value: '自动线',
          label: '自动线'
        }
      ],
      originalRows: {}, // 用于存储原始数据的备份
    };
  },
  created() {
    //获取所有产线模板以及详情信息
    this.getLineTplInfoListData();
    //获取当前工厂信息
    this.getFactoryInfo();
    //获取车间集合
    this.getWorkshopListData();
    //获取所有人员数据
    this.getPersonCredentialListData();
  },
  computed: {
    nodeList () {
      return this.option.nodeList
    }
  },
  mounted() {
    this.nodeCount = this.option.nodeList.length;//初始化节点下标
  },
  methods: {
    /**产线模板选择*/
    productLineTplChange(row){
      this.$set(this, 'showActive', []);//关闭所有折叠面板，防止切换模型照成连线混乱
      this.$refs.flow.resetPlumb();//清空画布
      this.$nextTick(function () {
        for (var i = this.option.nodeList.length - 1; i >= 0; i--) {
          var nodeId = this.option.nodeList[i].id;
          this.$delete(this.workPositionProcessItem, nodeId);
        }
        //主表数据
        this.mainData = row;//主数据
        //子表数据
        this.subData = row.tplDetailsList;//子表数据
        //产线模板名称
        this.lineTplName = this.mainData.lineName;
        //产线模板ID
        this.lineTplId = this.mainData.id;
        //设置反显工序
        this.option.nodeList = JSON.parse(this.mainData.processNodes);
        //设置反显工序指向顺序
        this.option.lineList = JSON.parse(this.mainData.processNodeLine);
        //初始化节点下标
        var n = this.option.nodeList[this.option.nodeList.length - 1].id;
        this.nodeCount = parseInt(n.split("node")[1]) + 1;
        //从子表数据中根据nodeId字段将对应的workPositionProcessItem填入到页面的workPositionProcessItem二位数组中
        for (var i = 0; i < this.subData.length; i++) {
          var nodeId = this.subData[i].nodeId;
          var item = JSON.parse(this.subData[i].workPositionProcessItem);
          //将item中的每一项都加入info属性
          for (var j = 0; j < item.length; j++) {
            item[j].info = [];
          }
          this.$set(this.workPositionProcessItem, nodeId, item);//添加工序集合
        }
        //重新初始化flow组件
        this.$refs.flow.init();
      })
    },
    /**获取产线模板*/
    getLineTplInfoListData(){
      getLineTplInfoList().then(response => {
        this.productLineTemplateList=response.data.data;
      })
    },
    /**获取工厂信息*/
    getFactoryInfo() {
      const factoryId=1;
      getObj(factoryId).then(response => {
        this.organizationId = response.data.data.menuId;//组织ID
        this.organizationName = response.data.data.organizationName;//组织名称
        //获取工厂设备集合
        this.getFactoryDeviceList();
      })
    },
    /**获取工厂设备集合*/
    getFactoryDeviceList(){
      var obj={
        position:this.organizationName,//设置组织查询条件
      }
      getDevice(obj).then(response => {
        this.deviceList =  response.data.data;//设备集合
        for(var i =0; i<this.deviceList.length;i++){
          if(this.deviceList[i].deviceClass==='20'){//组织下工具夹具筛选
            this.clampList.push(this.deviceList[i]);//夹具集合
            this.toolList.push(this.deviceList[i]);//工具集合
          }
        }
      })
    },
    /**获取车间集合*/
    getWorkshopListData(){
      getWorkshopList().then(response => {
        this.workshopList=response.data.data;
      })
    },
    /**车间选择*/
    workshopChange(row){
      this.workshopName = row.workshopName;//车间名称
    },
    //获取所有人员数据
    getPersonCredentialListData(){
      getPersonCredentialList().then(response => {
        this.personCredentialList = response.data.data;
      })
    },
    /**删除工位*/
    deleteNode(node){
      var id = node.id;
      var t = this;
      this.$confirm("确定要删除工位" + node.name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: !1
      }).then((function() {
        t.$refs.flow.deleteNode(id);
        t.$delete(t.workPositionProcessItem, id);
      })).catch((function() {}))
    },
    /**保存产线*/
    saveRealityLine(){
      if(this.validatenull(this.workshopName)){
        this.$message.warning("请选择车间。")
        return;
      }
      if(this.validatenull(this.realityLineName)){
        this.$message.warning("产线名称不能为空。")
        return;
      }
      if(this.validatenull(this.lineTplId)){
        this.$message.warning("请选择产线模板。")
        return;
      }
      if(this.validatenull(this.option.nodeList)){
        this.$message.warning("模板内容不能为空。")
        return;
      }
      if(this.validatenull(this.lineType)){
        this.$message.warning("请选择产线类型。")
        return;
      }

      //组装需要提交的数据-实际产线主表数据组装
      var params = {};//主表参数集合
      params.realityLineName = this.realityLineName;//产线名称
      params.lineTplId = this.lineTplId;//模板ID
      params.lineTplName = this.lineTplName;//模板名称
      params.lineType = this.lineType;//产线类型（手动线、自动线）
      params.workshopId = this.workshopId;//车间ID
      params.workshopName = this.workshopName;//车间名称
      params.processNodes = JSON.stringify(this.option.nodeList);//工位节点集合（其中mark字段为工位ID）
      params.processNodeLine = JSON.stringify(this.option.lineList);//工位各节点指向顺序集合

      //组装需要提交的数据-实际产线子表数据组装
      var objArr = [];
      //循环工位节点集合
      for(var i=0;i<this.option.nodeList.length;i++){
        var obj = {};//创建对象
        var nodeId = this.option.nodeList[i].id;
        var nodeObj = this.option.nodeList[i]

        obj['workPositionId'] = nodeObj.mark;//取出工位ID加入对象
        obj['workPositionName'] = nodeObj.name;//取出工位名称加入对象
        obj['nodeId'] = nodeObj.id;
        var workPositionProcessItem = this.workPositionProcessItem[nodeId];
        if(this.validatenull(workPositionProcessItem)){
          this.$message.warning("请为工位【"+nodeObj.name+"】配置工序。");
          return;
        }
        obj['workPositionProcessItem'] = JSON.stringify(workPositionProcessItem);//取出工位配置的工序集合加入对象
        var processNameStr="";//工序名字符串
        var processIdStr="";//工序ID字符串
        for (let j = 0; j < workPositionProcessItem.length; j++) {
          processNameStr = processNameStr + workPositionProcessItem[j].processName + ",";
          processIdStr = processIdStr + workPositionProcessItem[j].id + ",";
        }
        obj['processNameStr'] = processNameStr.substring(0,processNameStr.length-1);
        obj['processIdStr'] = processIdStr.substring(0,processIdStr.length-1);
        //最后加入提交数据数组
        objArr.push(obj)
      }
      // console.log("子表提交数据："+ JSON.stringify(objArr))
      var data={
        realityProduceLineModeling:params,
        realityProduceLineModelingDetailsList:objArr,
      }
      this.saveLoading=true;
      //提交
      saveModelingLine(data).then(response => {
        if(response.data.data==="1") {
          this.$message.warning(
            {
              message: "新增产线模型失败，产线模型：【"+this.realityLineName+"】已存在，已勿重复添加。",
              duration: 5000 // 设置时长为5秒
            });
          this.saveLoading = false;
        }else{
          this.$message.success("产线模型添加成功。")
          this.saveLoading = false;
          this.$emit('closeAdd');//关闭新增页面
        }
      }).catch(() => {
        this.saveLoading = false;
      });
    },
    //设备人员信息
    devicePersonInfo(node,processInfo,index){
      this.workPositionName=node.name;//工位名称(用于工序添加)
      this.workPositionId=node.mark;//工位ID(用于工序添加)
      this.nodeId=node.id;//工位节点ID(用于工序添加)
      this.processInfo.processName = processInfo.processName;//工序名称
      this.processInfo.processId = processInfo.id;//工序ID
      this.processInfo.workshopSection = processInfo.workshopSection;//工位所属工段
      this.index = index;
      this.infoList = this.workPositionProcessItem[node.id][index].info;
      this.originalRows = {};
      this.info={
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      }
      this.deviceDialogVisible=true;
    },
    //设备选择
    chooseDevice(item){
      this.info.deviceSn = item.deviceSn;
      this.info.deviceName = item.deviceName;
    },
    //工具选择
    chooseTool(val){
      // this.info.toolSn = item.deviceSn;
      let toolName = ''
      for (let i in val) {
        this.toolList.find((item) => {
          if (item.deviceSn === val[i]) {
            toolName=toolName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(toolName.length>0){
        toolName = toolName.substring(0,toolName.length-1)
      }
      this.info.toolName = toolName;
    },
    //夹具选择
    chooseClamp(val){
      // this.info.clampSn = item.deviceSn;
      let clampName = ''
      for (let i in val) {
        this.toolList.find((item) => {
          if (item.deviceSn === val[i]) {
            clampName=clampName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(clampName.length>0){
        clampName = clampName.substring(0,clampName.length-1)
      }
      this.info.clampName = clampName;
    },
    //人员选择
    choosePerson(item){
      this.info.personName = item.jobNo;
    },
    //确认添加设备人员信息
    addDevicePersonInfo(){
      if(this.validatenull(this.info.deviceSn)&&this.validatenull(this.info.toolSn)&&this.validatenull(this.info.clampSn)&&this.validatenull(this.info.personName)){
        this.$message.warning("请选择设备、工具、夹具、员工！");
        return;
      }
      const newInfo = { ...this.info };//深拷贝
      this.infoList.push(newInfo);
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
      this.info={
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      }
    },
    //人员信息删除
    delDevicePersonInfo(row,index){
      this.infoList.splice(index,1);
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
    },
    //鼠标移到置顶
    handleMouseEnter(nodeId) {
      //属性鼠标移到展开
      // this.$set(this.showActive, nodeId, ['1']);
      let ref = nodeId+"Ref";//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
      this.zIndexStyle="1";

    },
    //鼠标移开取消置顶
    handleMouseLeave(nodeId) {
      //属性鼠标移开关闭
      // this.$set(this.showActive, nodeId, []);
      let ref = nodeId+"Ref";//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex="2";
      this.zIndexStyle="";

    },
    chooseRowDevice(item,row){
      row.deviceSn = item.deviceSn;
      row.deviceName = item.deviceName;
    },
    chooseRowTool(row){
      // row.toolSn = item.deviceSn;
      let toolName = ''
      for (let i in row.toolSn) {
        this.toolList.find((item) => {
          if (item.deviceSn === row.toolSn[i]) {
            toolName=toolName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(toolName.length>0){
        toolName = toolName.substring(0,toolName.length-1)
      }
      row.toolName = toolName;
    },
    chooseRowClamp(item,row){
      let clampName = ''
      for (let i in row.clampSn) {
        this.clampList.find((item) => {
          if (item.deviceSn === row.clampSn[i]) {
            clampName=clampName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(clampName.length>0){
        clampName = clampName.substring(0,clampName.length-1)
      }
      row.clampName = clampName;
    },
    editRow(index, row) {
      // 备份原始数据
      this.$set(this.originalRows, index, { ...row });
      // 动态添加 edit 属性
      this.$set(row, 'edit', true);
    },
    //设备人员信息修改保存
    saveRow(index, row) {
      this.infoList[index] = row;
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
      this.$set(row, 'edit', false);
    },
    cancelEdit(index, row) {
      // 从备份对象中恢复原始数据
      Object.assign(row, this.originalRows[index]);
      this.infoList[index] = row;
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
      // 移除备份对象中的数据
      this.$delete(this.originalRows, index);
      // 取消编辑，恢复原始数据
      this.$set(row, 'edit', false);
    },
    //设备搜索
    deviceFilterMethod(query) {
      let arr = [];
      this.deviceSnVal = query;
      if (!this.validatenull(query)) {
        this.deviceList.forEach((item, i) => {
          if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
            arr.push(item.deviceSn);
          }
        })
      } else {
        this.deviceList.forEach((item, i) => {
          arr.push(item.deviceSn);
        })
      }
      this.sourceDeviceList = [...arr];
    },
    //工具搜索
    toolFilterMethod(query) {
      let arr = [];
      this.toolSnVal = query;
      if (!this.validatenull(query)) {
        this.toolList.forEach((item, i) => {
          if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
            arr.push(item.deviceSn);
          }
        })
      } else {
        this.toolList.forEach((item, i) => {
          arr.push(item.deviceSn);
        })
      }
      this.sourceToolList = [...arr];
    },
    //夹具搜索
    clampFilterMethod(query) {
      let arr = [];
      this.clampSnVal = query;
      if (!this.validatenull(query)) {
        this.clampList.forEach((item, i) => {
          if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
            arr.push(item.deviceSn);
          }
        })
      } else {
        this.clampList.forEach((item, i) => {
          arr.push(item.deviceSn);
        })
      }
      this.sourceClampList = [...arr];
    },
  }
};
</script>

<style scoped>
/deep/.avue-flow__node{
  height: auto!important;
}
/deep/ .avue-flow__node-header {
  line-height: 30px;
}
/deep/.el-descriptions__title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
}
/deep/.el-descriptions__header {
  width:100%!important;
}

/deep/ .el-dialog-height {
  height: 30vh;
  width: 90%;
  margin-top: 10px;
  overflow: auto;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/deep/ .el-step__icon.is-text{
  color: #000;
  font-size: 12px;
  padding: 10px;
  border-color: #000;
  width: 50px;
  height: 50px;
}
/deep/.el-step__icon{
  width: 40px;
  height: 40px;
}
/deep/.el-step.is-horizontal .el-step__line{
  top:20px!important;
  border-color: #000;
}
/deep/.el-step.is-vertical .el-step__line {
  left: 23px!important;
}
/deep/.el-step.is-vertical .el-step__main{
  padding-left: 36px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-top: 11px;
  color: #000;
  font-size: 12px;
}
/deep/.el-step.is-vertical .el-step__title{
  color: #000;
  font-size: 13px;
}
/deep/.el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #242526;
}

/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
/deep/.el-table__fixed{
  display: none!important;
}
/deep/.el-table__fixed-right{
  display: none!important;
}
/deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

/deep/ .avue-grid{
  display: none!important;
}
/deep/.el-main{
  background:#fff !important;
}
/deep/.el-card__body{
  padding: 0px!important;
}
/*去掉滚动条样式*/
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
